<template>
  <div class="captcha" v-html="svg" @click="refresh"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import request from '@/utils/request'

const model = defineModel()
const svg = ref('')

async function refresh() {
  const { data, captchaId } = await request.get<{ data: string; captchaId: string }>(
    '/admin/base/open/captcha'
  )
  svg.value = data
  model.value = captchaId
}

refresh()

defineExpose({ refresh })
</script>

<style scoped>
.captcha {
  width: 100px;
  height: 32px;
  cursor: pointer;
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-color-primary);
}

.captcha :deep(svg) {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
